<!-- 开发中 -->
<template>
  <div class="page-search">
    <BaseForm v-bind="props.config" v-model="formData" ref="baseFormRef">
      <template #footer>
        <div class="handle-btns">
          <el-button type="primary" @click="submit">
            <Edit style="margin-right: 5px;width: 1em;height: 1em;" />
            提交
          </el-button>
          <el-button @click="cancel">
            <Close style="margin-right: 5px;width: 1em;height: 1em;" />
            取消
          </el-button>
        </div>
      </template>
    </BaseForm>
  </div>
</template>
  
<script setup>
import { ref, defineProps } from 'vue'
import BaseForm from './base-ui/BaseForm.vue'
import {  Edit,Close } from '@element-plus/icons-vue'
const emit = defineEmits(['submit', 'cancel']);

const props = defineProps({
  config: {//v-model的字段,父组件传来的
    type: Object,
    require: true,
    default: () => ({})
  },
  transferData: {//v-model的字段,父组件传来的
    type: Object,
    require: true,
    default: () => ({})
  },
});
const baseFormRef = ref(null)
// 1.优化一: 加载字段
//2.优化二: 加载数据
const formData =ref({
 ...props.transferData
})

// 3.优化三: 当用户点击搜索
const submit = () => {
  baseFormRef.value.elformRef.validate((valid, fields) => {
    if (valid) {
      emit('submit', formData.value)
    } else {
    }
  })
  //emit('submit', formData.value)
}
const cancel = () => {
  emit('cancel')
}
</script>
  
<style scoped>
.header {
  color: red;
}

.handle-btns {
  text-align: center;
  padding: 0 50px 20px 0;
}
</style>
  